<template>
    <div style="width:85%;height:400px;margin:0px auto;">
        <el-row :gutter="24">
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况</el-divider>
                    <ve-map :data="provinceData" :events="provinceChartEvents"/>
                </el-panel>
            </el-col>
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况</el-divider>
                    <ve-waterfall :data="provinceData"/>
                </el-panel>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况-{{province}}</el-divider>
                    <ve-map :data="cityData" :settings="citySettings" :events="provinceChartEvents"/>
                </el-panel>
            </el-col>
            <el-col :span="12">
                <el-panel>
                    <el-divider content-position="left">市场份额全国分布情况-{{province}}</el-divider>
                    <ve-pie :data="cityData"/>
                </el-panel>
            </el-col>
        </el-row>
    </div>               
</template>
<script>
export default {
    name: "stat-panel",
    data() {
        var _self = this;
        return {
            cityMapping:{
                '北京':'beijing',
                '上海':'shanghai',
                '天津':'tianjin',
                '重庆':'chongqqing',
                '黑龙江':'heilongjianng',
                '吉林':'jilin',
                '辽宁':'liaoning',
                '河北':'hebei',
                '河南':'henan',
                '山东':'shandong',
                '山西':'shanxi',
                '湖北':'hubei',
                '湖南':'hunan',
                '江西':'jiangxi',
                '广东':'guangdong',
                '福建':'fujian',
                '江苏':'jiangsu',
                '安徽':'anhui',
                '浙江':'zhejiang',
                '四川':'sichuan',
                '青海':'qinghai',
                '陕西':'shanxi',
                '海南':'hainan',
                '云南':'yunnan',
                '贵州':'guizhou',
                '新疆':'xinjiang',
                '西藏':'xizang',
                '宁夏':'ningxia',
                '广西':'guangxi',
                '内蒙古':'neimenggu',
                '台湾':'taiwan',
            },
            province: '河南',
            provinceChartEvents:{
                click:(e) => {
                    console.log(e);
                    var province = e.name;
                    _self.province = province;
                    _self.initCityData(province);
                }
            },
            provinceData: {
                columns: ['省份', '数量'],
                rows: [
                    {'省份':'北京','数量':22},
                    {'省份':'上海','数量':32},
                    {'省份':'重庆','数量':42},
                    {'省份':'天津','数量':22},
                    {'省份':'河南','数量':44}
                ]
            },
            citySettings:{
                position: 'province/henan'
            },
            cityData: {
                columns: ['市', '数量'],
                rows: [
                    {'市':'郑州市','数量':12},
                    {'市':'商丘市','数量':32},
                    {'市':'洛阳市','数量':62},
                    {'市':'新乡市','数量':22}
                ]
            }
        };
    },
    mounted() {
         this.initData();
    },
    methods: {
        initData() {
            this.initDealerList();
        },
        initCityData(provinceName = 'all'){
            var isLoadProvince = provinceName === 'all';
            if(isLoadProvince){
                this.provinceData.rows = [];
            }else{
                this.cityData.rows = [];
                this.citySettings.position = 'province/' + this.cityMapping[provinceName];
            }
        },
    }
};
</script>
<style scoped>

</style>